<template>
    <el-container style="text-align: right; font-size: 12px">
        <el-backtop :bottom="60"></el-backtop>
        <!--********** 头部 -->
        <el-header style="height:auto"
                   :class="addpadding">
            <e-header></e-header>
        </el-header>
        <!--********** 主体 -->
        <el-main style="height:auto"
                 :class="bacColor">
            <div class="mo_login"
                 v-loading="loading"
                 element-loading-text="拼命加载中"
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="#ffffff">
                <div class="addbreadcrumb">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{text_cate_name}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                 <div class="search-all">
                <el-input class="search-input"
                          placeholder="请输入内容"
                          v-model="searchinput"
                          clearable
                          @keyup.enter.native="searchText(searchinput)">
                    <el-button class="search-button"
                               type="primary"
                               slot="append"
                               icon="el-icon-search"
                               @click="searchText(searchinput)">搜索</el-button>

                </el-input>

                <!-- <el-input class="search-input"
                          placeholder="请输入内容"
                          v-model="searchinput"
                          clearable
                          @keyup.enter.native="searchText(searchinput)"> </el-input> -->

            </div>

                <div class="periphery">

                    <div v-show="!liststuats"
                         class="no-addlist">
                        <div class="no-showimg">
                            <el-image :src="topimgsrc"
                                      fit="cover"></el-image>
                        </div>
                        <div class="no_text">
                            <p>未检索到文章！</p>
                        </div>
                    </div>

                    <div v-show="liststuats"
                         class="pure-list">
                        <div class="pure-hotlist"
                             v-for="(item,index) in rightlist"
                             :key="index"
                             @click="ToMessageDetails(item.id,cate_id)">
                            <div class="purelist-table">
                                <div class="purelist-img">
                                    <img class="purelist-img"
                                         :src="item.imgsrc"
                                         alt="">
                                </div>
                            </div>
                            <div class="purelist-details">
                                <div class="purelist-title">
                                    <p class="textOut">{{item.title}}</p>
                                </div>
                                <div class="purelist-text textOut">{{item.text}}</div>
                                <div class="purelist-name">{{item.name}} {{item.date}}</div>
                            </div>
                        </div>

                    </div>
                    <div class="add_pagination">

                        <el-pagination @size-change="handleSizeChange"
                                       @current-change="handleCurrentChange"
                                       :current-page="currentPage"
                                       :page-size="4"
                                       layout="total,  prev,pager,  next, jumper"
                                       :total="addTotal">

                        </el-pagination>
                    </div>

                </div>
            </div>
        </el-main>

        <!--********** 底部 -->
        <el-footer style="height:auto">
            <e-footer></e-footer>
        </el-footer>
    </el-container>

</template>
<script>
import eHeader from "@/components/public/MesHeader.vue";
import eFooter from "@/components/public/Footer.vue";
import { throttle } from "../../ElementUI/public.js";


export default {
    components: {
        eHeader,
        eFooter
    },
    data() {
        return {
            searchinput: "",
            text_cate_name: "",
            text_title: "",
            text_date: "",
            name: "",
            text_img: "",
            text_content: "",
            rightlist: [],
            addTotal: 4,
            currentPage: 1,
            addId: 0,
            liststuats: false,
            topimgsrc: require("../../assets/images/no_text.jpg"),
            addpadding: "addpadding",
            bacColor: "#F0FFFE",
            loading: false,
        };
    },
    computed: {

    },

    created() {
        let textid = sessionStorage.getItem('SearchTextlist');
        this.addId = textid

        this.getMesDetials(textid, 1, 4);
        sessionStorage.removeItem('SearchTextlist');

        let getColor = localStorage.getItem('background-color')
        let Colorarr = getColor.slice(1, 7)
        this.bacColor = Colorarr


    },
    mounted() {
        this.$bus.$on('changeColor', (e) => {
           
            this.addpadding = "addpadding";
            if (this.bacColor != e) {
                let Colorarr = e.slice(1, 7)
                this.bacColor = Colorarr
            }

        })
    },
    watch: {},

    methods: {
        // 文章列表接口
        getMesDetials(textid, page, limit) {
            let _this = this;
            _this.loading = true
            _this.rightlist = [];
            _this.text_cate_name = "“" + textid + "”" + "的搜索结果";
            let Url = "/articlesearch?keywords=" + textid + "&page=" + page + "&limit=" + limit
            let Params = {};
            this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;


                switch (resdata.code) {
                    case 1000:
                        _this.loading = false
                        let adddata = resdata.data
                        _this.addTotal = adddata.total;
                        if (_this.addTotal != 0) {
                            _this.liststuats = true;
                        }
                        switch (adddata.current_page) {
                            case 1:
                                let rightdata = adddata.data;
                                for (var i = 0; i < rightdata.length; i++) {
                                    //
                                    _this.rightlist.push({
                                        id: rightdata[i].a_id,
                                        cate_id: rightdata[i].cate_id,
                                        title: rightdata[i].title,
                                        text: rightdata[i].seo_keywords,
                                        imgsrc: rightdata[i].thumb,
                                        name: rightdata[i].name,
                                        date: rightdata[i].created_at
                                    });
                                }
                                
                                break;

                        }
                        break;
                    case 1002:
                        _this.loading = false
                        console.log(resdata.msg)
                        break

                }

            });
        },
        //点击分页
        handleSizeChange(val) {
            
        },
        handleCurrentChange(val) {
           

            let _this = this;
            _this.rightlist = [];
            let Url = "articlesearch?keywords=" + this.addId + "&page=" + val + "&limit=4"
            let Params = {};
            this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        let adddata = resdata.data
                        switch (adddata.current_page) {
                            case val:
                                let rightdata = adddata.data;
                                for (var i = 0; i < rightdata.length; i++) {
                                    //_this.text_cate_name = rightdata[i].cate_name;
                                    _this.rightlist.push({
                                        id: rightdata[i].a_id,
                                        title: rightdata[i].title,
                                        text: rightdata[i].seo_keywords,
                                        imgsrc: rightdata[i].thumb,
                                        name: rightdata[i].name,
                                        date: rightdata[i].created_at
                                    });
                                }

                                break;

                        }
                        break;
                    case 1002:
                        console.log(resdata.msg)
                        break

                }

            });



        },
        //跳转文章详情
        ToMessageDetails(textid, cate_id) {
            this.$router.push("/MessageDetails")
            sessionStorage.setItem('Details', textid)
            sessionStorage.setItem('Details_cate_id', cate_id)
        },
        //搜索
        searchText: throttle(function (name) {
            this.getMesDetials(name, 1, 4);
        }, 1000),
    }
};
</script>
<style lang="scss"  scoped>
.el-container {
    overflow: hidden;
}
.el-main {
    overflow: hidden;
    padding: 0;
}

$font-color: #fff;
$bg-color: rgba(46, 139, 87, 0.4);
$btn-color: #409eff;
$shadow-color: 3px 7px 50px -12px rgba(64, 158, 255, 0.4);
@mixin bubbleAnimation($send1, $send2) {
    animation: bubble $send1 linear infinite,
        direction $send2 ease-in-out infinite alternate;
}
.mo_login {
    position: relative;
    max-width: 1200px;
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 20px;
    padding: 0 10px 20px 10px;
    // min-height: 630px;
    height: auto;

    background: #ffffff;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        //background-image: linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
        z-index: -1;
    }
    .addbreadcrumb {
        width: 100%;
        height: 40px;
        font-size: 14px;
        padding-top: 13px;
        background: #fbfbfb;
        float: left;
    }

    .search-all {
            width: 50%;
            height: 40px;
            float: left;
            margin-top: 24px;
            margin-left: 25%;
            .search-input {
                width: 100%;
                height: 40px;
                float: left;
                //margin-right: 4px;
                border: 1px solid #dfc2bf;
                border-right: none;
                border-radius:2px ;
                .el-input__inner {
                    width: 100%;
                    height: 40px;
                    border: none;
                }
            }
            .el-input-group__append,
            .el-input-group__prepend {
                background-color: #ffffff;
                color: #909399;
                vertical-align: middle;
                display: table-cell;
                position: relative;
                border: none;

                border-radius: 4px;
                padding: 0 20px;
                width: 1px;
                white-space: nowrap;
            }
            .search-button {
                width: 80px;
                height: 42px;
                background: #558ffb;
                border: none;
                //border-left: 1px solid #dfc2bf;
                border-radius: 3px;
                float: left;
                color: #ffffff;
            }
        }
       .search-all /deep/  .el-input__inner{
         height: 40px;
         border: none;
       }
    .periphery {
        width: 100%;
        min-height: 588px;
        height: auto;
        background: #ffffff;
        //padding-top: 42px;
        overflow: hidden;
        .no-addlist {
            width: 164px;
            height: 214px;
            margin: auto;
            margin-top: 186px;
            margin-bottom: 156px;
            .no-showimg {
                width: 100%;
                height: 164px;
                .addimg {
                    width: 100%;
                    height: 100%;
                }
            }
            .no_text {
                width: 100%;
                height: 22px;
                line-height: 22px;
                margin-top: 28px;
                text-align: center;
            }
        }
        .pure-list {
            width: 100%;
            min-height: 550px;
            height: 95%;
            overflow: hidden;
            padding-top: 13px;
            .pure-hotlist {
                width: 100%;
                height: 155px;
                float: left;
                padding: 13px 0px 8px 20px;
                border-bottom:1px solid #f6f6f6 ;
                cursor: pointer;
                .purelist-table {
                    width: 15.5%;
                    height: 122px;
                    border-radius: 5px;
                    float: left;
                    .purelist-img {
                        width: 100%;
                        height: 100%;
                    }
                }
                  .purelist-details {
                    width: 83.5%;
                    height: 122px;
                    padding: 0px 12px 17px 12px;
                    float: left;
                    margin-left: 10px;
                    text-align: left;
                    .purelist-title {
                        width: 100%;
                        height: 40px;
                        font-size: 18px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 20px;
                        float: left;
                        text-align: left;
                    }
                    .purelist-title :hover {
                        color: #558ffb;
                        text-decoration: underline;
                    }
                    .purelist-text {
                        width: 100%;
                        height: 40px;
                        font-size: 14px;
                        color: #999999;
                        float: left;
                        text-align: left;
                        overflow: hidden;
                    }
                    .purelist-name {
                        width: 100%;
                        height: 20px;
                        float: left;
                        color: #999999;
                        text-align: left;
                        margin-top:27px;
                    }
                }
            }
        }
        .add_pagination {
            margin: auto;
            margin-bottom: 20px;
            margin-top: 30px;
            padding: 0 38% 0 20%;
        }
    }
}
.mo_login /deep/ .el-loading-spinner {
    font-size: 30px;
}
.addpadding {
    padding: 0;
}
.DAEBFF {
    background: #daebff;
}
.F5F5FD {
    background: #f5f5fd;
}
.F0FFFE {
    background: #f0fffe;
}
</style>